<template>
     <div class="page-content">
        <div class="comm-content" ref="box"></div>
    </div>  
</template>
<script>
export default {
    data() {
        return {
            myEcharts:null
        }
    },computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getData()
            this.screen()
        }
    },

    mounted() { 
        this.initEcharts()
        this.getData()
        window.addEventListener('resize',this.screen)
    },
    methods:{
        // 屏幕适配
        screen(){
            this.myEcharts.resize()
            let width = this.$refs.box.offsetWidth
            let num = width / 100 * 3
            let innerRadius = num * 1.5
            let outerRadius = innerRadius * 1.6
            let seriesRadius = [1,2,3,4].map(item=>{
                return {
                    radius:[innerRadius,outerRadius],
                    label:{
                        fontSize:num
                    }
                }
            })
            let options = {
                title:{
                    textStyle:{
                        fontSize:num
                    }
                },
                series:seriesRadius
            }
            this.myEcharts.setOption(options)
        },
        initEcharts(){
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box,this.themeStatus)
            /** @type EChartsOption */
            let options = {
                title: {
                    text: '主要地区农作物种植区域占比',
                },
            }
            this.myEcharts.setOption(options)
        },
        async getData(){
            let dataList = await this.$http('/api/cropAreasProportion')
            console.log(dataList);
            let centerList = [
                ['17.5%', '60%'],
                ['37.5%', '60%'],
                ['57.5%', '60%'],
                ['77.5%', '60%']
            ]
            let seriesData = dataList.data.map((item,index)=>{
                return {
                    type: 'pie',
                    center: centerList[index],
                    radius: [50, 70],
                    label: {
                        show: true,
                        position: 'center',
                        fontSize:30
                    },
                    data: [
                        {
                            name: item.areas + '\n' + item.zb + '%',
                            value: item.zb
                        },
                        {
                            value: item.other
                        }
                    ],
                }
            })
            this.setEcharts(seriesData)
        },
        setEcharts(seriesData){
            let options = {
                series: seriesData,
            }
            this.myEcharts.setOption(options)
            this.screen()
        }
    }
}
</script>
<style></style>